<template>
	<view class="area-select">
		<picker class="select" @change="provinceChange" :range="provinceData" range-key="name">
			<input type="text" class="uni-input" placeholder="省" :value="province" :disabled="true"/>
		</picker>
		<picker class="select" @change="cityChange" :range="cityData" range-key="name">
			<input type="text" class="uni-input" placeholder="市" :value="city" :disabled="true"/>
		</picker>
		<picker class="select" @change="countyChange" :range="countyData" range-key="name">
			<input type="text" class="uni-input" placeholder="区" :value="county" :disabled="true"/>
		</picker>
	</view>
</template>

<script>
	import { getDistrict } from '@/common/api/api.js'
	export default {
		name: 'AreaSelect',
		props: ['districtCode'],
		data() {
			return {
				code: '',
				provinceData: [],
				province: '',
				cityData: [],
				city: '',
				countyData: [],
				county: ''
			};
		},
		created() {
			this.loadArea('province');
		},
		methods: {
			loadArea(type) {
				getDistrict({code: this.code}).then(res=> {
					if(res.code == 20000){
						switch(type) {
							case 'province':
								this.provinceData = res.data;
							break;
							case 'city':
								this.cityData = res.data;
							break;
							default:
								this.countyData = res.data;
						}
						
					}
				})
			},
			provinceChange(e) {
				let index = e.detail.value;
				this.code = this.provinceData[index].code;
				this.province = this.provinceData[index].name;
				this.loadArea('city');
				this.$emit('update:districtCode', this.code);
			},
			cityChange(e) {
				let index = e.detail.value;
				this.code = this.cityData[index].code;
				this.city = this.cityData[index].name;
				this.loadArea();
				this.$emit('update:districtCode', this.code);
			},
			countyChange(e) {
				let index = e.detail.value;
				this.code = this.countyData[index].code;
				this.county = this.countyData[index].name;
				this.$emit('update:districtCode', this.code);
			}
		}
	}
</script>

<style lang="less">
	.area-select{
		display: flex;
		>.select{
			margin-right: 10rpx;
			padding: 10rpx;
			border: 1px solid #ccc;
			border-radius: 4px;
			&:last-child{
				margin-right: 0;
			}
			.uni-input{
				color: #333;
				font-size: 26rpx;
			}
			
		}
	}
</style>
